<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>

        </thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>
</body>
</html>
<script src="./axios.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8888'
    function $(ele){
        return document.querySelector(ele)
    }
    function getCartList(){
        axios.get('/cart/list',{
            params:{
                id: localStorage.getItem('id')
            },
            headers:{
                authorization: localStorage.getItem('token')
            }
        }).then(res => {
            if(res.data.code != 1){
                alert("请登录");
                location.href = 'login.html'
                return;
            }
            var str = ''
            res.data.cart.forEach(item => {
                console.log(item);
                str += `
                <tr>
                    <td>
                        <input type="checkbox" class="checkbox" 
                         data-goodsid=${item.goods_id} 
                          ${item.is_select ? 'checked':''}>
                        </td>
                        <td>
                            <img src="${item.img_small_logo}" 
                             alt="">
                            </td>
                            <td>${item.title}</td>
                            <td>
                                ¥${item.price}
                                </td>
                                <td with='100px'>
                                    <input type="button" value="-"
                                    <span>${item.cart_number}</span>
                                    <input type= "button" value="+">
                                    </td>
                                    <td>¥${item.price * item.cart_number}</td>
                                    <td><button>删除</button></td>
                    </tr>`
            })
            $("tbody").innerHTML = str;

          var totalNum = 0
          var totalPrice = 0
          var selectNum = 0
            $("thead").innerHTML = `
               <tr>
                <td colspan="7">
                    <input type="checkbox" id="check" 
                    class="check" ${res.data.cart.length== selectNum?"checked":''}>全选</td>
                    </td>
                </tr>
            `
            res.data.cart.forEach(item =>{
                if(item.is_select){
                    totalNum += item.cart_number;
                    totalPrice += item.cart_number *item.price;
                    selectNum++;
                }
            })

            $('tfoot').innerHTML = `
            <tr>
                <td>总数量：${totalNum}</td>
                <td colspan="4">
                    <button>清空购物车</button>
                    <button>删除所有已选中</button>
                </td>
                <td colspan="2">
                    总价格：¥<span>${totalPrice}</span>
                    </td>
                </tr>
            `

           
        })
    }
    getCartList()
</script>